<template>
	<x-skeleton :type="'banner'" :loading="loading">
		<view :style="themeColor()">
			<view class="bg-[var(--page-bg-color)] min-h-[100vh] relative" v-if="Object.keys(goodsDetail).length">
				<!-- 自定义头部 -->
				<view class="flex items-center fixed left-0 right-0 z-10 bg-transparent detail-head"
					:class="{ '!bg-[#fff]': detailHeadBgChange }" :style="navbarInnerStyle">
					<text class="nc-iconfont nc-icon-zuoV6xx" :style="navbarInnerArrowStyle" @click="backToPrevious()"></text>
					<view
						class="ml-auto !pt-[12rpx] !pb-[8rpx] p-[10rpx] bg-[rgba(255,255,255,.4)] rounded-full border-[2rpx] border-solid border-transparent box-border nc-iconfont nc-icon-fenxiangV6xx font-bold text-[#303133] text-[36rpx]"
						:class="{ 'border-[#d8d8d8]': detailHeadBgChange }" @click="openShareFn"></view>
				</view>

				<view class="w-full h-[100vw] relative overflow-hidden">
					<view class="absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
						:class="{ 'translate-x-0': switchMedia === 'img', 'translate-x-full': switchMedia != 'img' }">
						<u-swiper :list="goodsDetail.goods.sliderPicUrls" :indicator="goodsDetail.goods.sliderPicUrls.length > 0"
							:indicatorStyle="{ 'bottom': '70rpx' }" :autoplay="switchMedia === 'img' ? true : false" height="100vw"
							radius="0" @click="swiperClick"></u-swiper>
					</view>
					<view
						class="media-mode absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
						:class="{ 'translate-x-0': switchMedia === 'video', '-translate-x-full': switchMedia != 'video' }">
						<video id="goodsVideo" class="w-full h-full" :src="img(goodsDetail.goods.videoUrl)"
							:poster="img(goodsDetail.goods.videoImg)" objectFit="cover"></video>
					</view>
					<!-- 切换视频、图片 -->
					<view class="media-mode absolute bottom-[74rpx] w-full text-center leading-[50rpx] "
						v-if="goodsDetail.goods.videoUrl && goodsDetail.goods.videoUrl != ''">
						<text :class="{ '!bg-[var(--primary-color)]': switchMedia == 'video' }" @click="switchMedia = 'video'">视频
						</text>
						<text :class="{ '!bg-[var(--primary-color)]': switchMedia == 'img' }"
							@click="(switchMedia = 'img'), videoContext.pause()">图片 </text>
					</view>
				</view>
				<view v-if="activityList && activityList.length > 0"
					class="rounded-t-[40rpx] -mt-[44rpx] relative flex flex-col justify-center !bg-cover box-border pb-[26rpx] h-[136rpx] px-[30rpx]"
					:style="{ background: 'url(' + img('addon/shop/detail/discount_price_bg.png') + ') no-repeat' }">
					<view class="text-[#fff]" v-for="activity in activityList" :key="activity.id" @click="onActivity(activity)">
						<image class="h-[28rpx] w-[auto] mr-[10rpx]" v-if="activity.type === 1"
							:src="'https://meton-bucket.oss-cn-beijing.aliyuncs.com/icon/goods/seckill-icon.png'" mode="heightFix">
						</image>
						<image class="h-[28rpx] w-[auto] mr-[10rpx]" v-if="activity.type === 3"
							:src="'https://meton-bucket.oss-cn-beijing.aliyuncs.com/icon/goods/groupon-icon.png'" mode="heightFix">
						</image>
						<text class="text-[28rpx] mr-[10rpx] font-500 leading-[36rpx]">该商品正在参与{{ activity.name }}活动</text>
						<view class="inline-block">
							<view
								class="link relative text-[28rpx] leading-[40rpx] flex items-center text-white rounded-[20rpx] h-[40rpx] pl-[10rpx] pr-[10rpx]">
								<text class="iconfont iconjiantou-you-cuxiantiao-fill !text-[28rpx] text-[#fff]"></text>
							</view>
						</view>

					</view>
				</view>
				<view v-if="priceType != ''"
					class="rounded-t-[40rpx] -mt-[44rpx] relative flex items-center justify-between !bg-cover box-border pb-[26rpx] h-[136rpx] px-[30rpx]"
					:style="{ background: 'url(' + img('addon/shop/detail/discount_price_bg.png') + ') no-repeat' }">
					<view class="text-[#fff]">
						<text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]"
							v-if="priceType == 'newcomer_price'">新人价</text>
						<text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]"
							v-else-if="priceType == 'discount_price'">折扣价</text>
						<text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]"
							v-else-if="priceType == 'member_price'">会员价</text>
						<view class="inline-block mr-[14rpx]">
							<text class="text-[32rpx] price-font mr-[4rpx]">￥</text>
							<text class="text-[48rpx] -mb-[4rpx] price-font">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0]
							}}</text>
							<text class="text-[32rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
						</view>
						<view class="inline-block">
							<text class="text-[26rpx] mr-[6rpx]" v-if="goodsDetail.price">售价:</text>
							<text class="text-[26rpx] price-font leading-[36rpx]">￥{{ diyGoods.fen2yuan(goodsDetail.price) }}</text>
						</view>
					</view>
					<view v-if="priceType == 'discount_price'"
						class="flex flex-col text-[#fff] items-end h-[59rpx] justify-between">
						<image class="h-[28rpx] w-[auto] mr-[2rpx]" :src="img('addon/shop/detail/discount_price.png')"
							mode="heightFix">
						</image>
						<view class="flex items-center text-[24rpx] -mb-[10rpx] overflow-hidden h-[28rpx]">
							<text class="mr-[4rpx] whitespace-nowrap">距结束</text>
							<up-count-down class="text-[#fff] text-[28rpx]" :time="discountTime" format="DD:HH:mm:ss"
								@change="onChange">
								<view class="flex">
									<view class="text-[24rpx] flex items-center" v-if="timeData.days > 0">
										<text>{{ timeData.days }}</text>
										<text class="ml-[4rpx] text-[20rpx]">天</text>
									</view>
									<view class="text-[24rpx] flex items-center">
										<text class="min-w-[30rpx] text-center" v-if="timeData.hours">{{
											timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</text>
										<text class="min-w-[30rpx] text-center" v-else>00</text>
										<text class="text-[20rpx]">时</text>
									</view>
									<view class="text-[24rpx] flex items-center">
										<text class="min-w-[30rpx] text-center">{{ timeData.minutes >= 10 ? timeData.minutes :
											'0' + timeData.minutes }}</text>
										<text class="text-[20rpx]">分</text>
									</view>
									<view class="text-[24rpx] flex items-center">
										<text class="min-w-[30rpx] text-center">{{ timeData.seconds < 10 ? '0' + timeData.seconds :
											timeData.seconds }}</text>
												<text class="text-[20rpx]">秒</text>
									</view>
								</view>
							</up-count-down>
						</view>
					</view>
				</view>
				<view class="bg-[var(--page-bg-color)] rounded-[40rpx] overflow-hidden -mt-[34rpx] relative">
					<view class="datail-title relative px-[30rpx]"
						:class="{ 'pt-[40rpx]': priceType != '', 'pt-[30rpx]': priceType == '' }">
						<!-- 如果是非视频商品的展示 -->

						<view class="text-[var(--price-text-color)] flex items-baseline mb-[12rpx]" v-if="priceType === ''">
							<view class="inline-block goods-price-time" v-if="goodsDetail.goods.spuType != 6">
								<text class="price-font text-[32rpx]">￥</text>
								<text class="price-font text-[48rpx]">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
								<text class="price-font text-[32rpx] mr-[10rpx]">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1]
								}}</text>
							</view>
							<!-- 如果是视频商品的展示 -->
							<template v-if="goodsDetail.goods.spuType == 6">
								<view class="inline-block goods-price-time"
									v-if="goodsDetail.tvSaleMethodType != 0 && !goodsDetail.goods.vodeoPlay">
									<text class="price-font text-[32rpx]">￥</text>
									<text class="price-font text-[48rpx]">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
									<text class="price-font text-[32rpx] mr-[10rpx]">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1]
									}}</text>
								</view>
								<view class="inline-block goods-price-time" v-else>
									<text class="price-font text-[32rpx]">{{ goodsDetail.goods.vodeoPlay ? '已购买' : '免费' }}</text>
								</view>
							</template>

							<!-- <text class="text-[26rpx] text-[var(--text-color-light9)] line-through price-font" v-if="goodsDetail.market_price && parseFloat(goodsDetail.market_price)">
							￥{{ goodsDetail.market_price }}
						</text> -->
						</view>
						<view class="text-[#333]  text-[32rpx] font-bold multi-hidden leading-[40rpx]">
							<view class="brand-tag middle" v-if="goodsDetail.goods.brandName">
								{{ goodsDetail.goods.brandName }}
							</view>
							{{ goodsDetail.goods.titleName || goodsDetail.goods.spuName }}
						</view>
						<view class="flex justify-between items-start mt-[24rpx]">
							<view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)]"
								v-if="goodsDetail.market_price && parseFloat(goodsDetail.market_price)">
								<text class="whitespace-nowrap mr-[4rpx]">划线价:</text>
								<text class="line-through">￥{{ diyGoods.fen2yuan(goodsDetail.market_price) }}</text>
							</view>
							<view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)]">
								<text class="whitespace-nowrap mr-[4rpx]">库存:</text>
								<text class="">{{ goodsDetail.stock }}</text>
								<text class="">{{ goodsDetail.goods.unit }}</text>
							</view>
							<view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)] flex items-baseline">
								<text class="whitespace-nowrap mr-[4rpx]">销量:</text>
								<text class="mx-[2rpx]">{{ goodsDetail.goods.salesCount }}</text>
								<text class="">{{ goodsDetail.goods.unit }}</text>
							</view>
						</view>
						<view class="flex flex-wrap mt-[16rpx]" v-if="goodsDetail.label_info && goodsDetail.label_info.length">
							<block v-for="item in goodsDetail.label_info" :key="item.label_id">
								<image class="img-tag middle" v-if="item.style_type == 'icon' && item.icon" :src="img(item.icon)"
									mode="heightFix" @error="diyGoods.error(item, 'icon')"></image>
								<view class="base-tag middle" v-else-if="item.style_type == 'diy' || !item.icon"
									:style="diyGoods.baseTagStyle(item)">
									{{ item.label_name }}
								</view>
							</block>
						</view>
					</view>
					<view class="mt-[24rpx] sidebar-margin card-template" v-if="isGoodsPropertyTemp">
						<view @click="videosDataShow = !videosDataShow"
							v-if="goodsDetail.goods.videos && goodsDetail.goods.videos.length" class="card-template-item">
							<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">视频章节</text>
							<view class="text-[#343434] text-[26rpx] leading-[30rpx] font-400 truncate ml-auto">
								共 {{ goodsDetail.goods.videos.length }} 章节
							</view>
							<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
						</view>
						<view @click="servicesDataShow = !servicesDataShow" v-if="goodsDetail.service && goodsDetail.service.length"
							class="card-template-item">
							<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">服务</text>
							<view class="text-[#343434] text-[26rpx] leading-[30rpx] font-400 truncate ml-auto">
								{{ goodsDetail.service[0].service_name }}
							</view>
							<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
						</view>
						<view @click="buyFn" v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length"
							class="card-template-item">
							<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">已选</text>
							<view class="ml-auto text-right truncate flex-1 text-[#343434] text-[26rpx] leading-[30rpx] font-400">
								{{ goodsDetail.sku_spec_format }}
							</view>
							<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
						</view>
						<view class="card-template-item" @click="distributionDataOpen"
							v-if="goodsDetail.goods.goods_type == 'real' && goodsDetail.delivery_type_list && goodsDetail.delivery_type_list.length">
							<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">配送</text>
							<view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">
								{{ goodsDetail.delivery_type_list[selectDeliveryType].name }}
							</view>
							<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
						</view>
						<view @click="couponListShow = true" v-if="couponList.length" class="card-template-item">
							<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">领券</text>
							<view class="ml-auto flex-1 flex-nowrap flex items-center overflow-hidden h-[44rpx] content-between">
								<block v-for="(item, index) in couponList" :key="index">
									<text v-if="index < 3"
										class="tag-item whitespace-nowrap border-[2rpx] px-[6rpx] h-[40rpx] border-solid border-[var(--primary-color)] text-[var(--primary-color)] mt-[4rpx]"
										:class="{ 'mr-[12rpx]': couponList.length != (index + 1) && index < 2, 'ml-auto': index == 0 }">
										{{ item.couponTemplateName }}
									</text>
								</block>
							</view>
							<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
						</view>
						<view class="card-template-item" @click="manjianOpenFn" v-if="Object.keys(manjianData).length">
							<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">优惠</text>
							<view class="ml-auto flex-1 flex-nowrap flex items-center overflow-hidden h-[44rpx] justify-end">
								<view
									class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx]	text-[22rpx] flex items-center justify-center w-[86rpx] h-[34rpx] mr-[6rpx]">
									满减送</view>
								<view class="truncate max-w-[430rpx] text-[26rpx]">{{ manjianData.name }}</view>
							</view>
							<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
						</view>
					</view>

					<view v-if="goodsDetail.evaluate_is_show" class="mt-[var(--top-m)] sidebar-margin card-template">
						<view class="flex items-center justify-between min-h-[40rpx]"
							:class="{ 'mb-[30rpx]': evaluate && evaluate.list && evaluate.list.length }">
							<text class="title !mb-[0]">宝贝评价({{ evaluate.count }})</text>
							<view v-if="evaluate.count" class="h-[40rpx] flex items-center" @click="toLink(goodsDetail.goods_id)">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">查看全部</text>
								<text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
							</view>
							<text v-if="!evaluate.count" class="text-[24rpx] text-[var(--text-color-light6)]">暂无评价</text>
						</view>
						<view>
							<view :class="{ 'pb-[34rpx]': index != (evaluate.list.length - 1) }"
								v-for="(item, index) in evaluate.list" :key="index">
								<view class="flex items-center w-full">
									<u-avatar :default-url="img('static/resource/images/default_headimg.png')" :src="img(item.userAvatar)"
										:size="'50rpx'" leftIcon="none" />
									<text class="ml-[10rpx] text-[28rpx] text-[#333]">{{ item.userNickname }}</text>
								</view>
								<view class="flex justify-between w-full mt-[16rpx]">
									<view
										class="flex-1 w-[540rpx] text-[26rpx] text-[#333] max-h-[72rpx] leading-[36rpx] multi-hidden mr-[50rpx]">
										{{ item.content }}</view>
									<view class="w-[80rpx] shrink-0">
										<u--image v-if="item.picUrls && item.picUrls.length" width="80rpx" height="80rpx"
											radius="var(--goods-rounded-mid)" :src="img(item.picUrls[0])" model="aspectFill"
											@click="imgListPreview(item.picUrls[0])">
											<template #error>
												<u-icon name="photo" color="#999" size="50"></u-icon>
											</template>
										</u--image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="my-[var(--top-m)] goods-sku sidebar-margin card-template"
						v-if="goodsDetail.goods && goodsDetail.goods.attr_format && Object.keys(goodsDetail.goods.attr_format).length">
						<view class="title mb-[30rpx]">商品属性</view>
						<view>
							<block v-for="(item, index) in goodsDetail.goods.attr_format" :key="index">
								<view v-if="index < 4 || isAttrFormatShow" class="card-template-item">
									<text
										class="text-[26rpx] leading-[30rpx] w-[160rpx] font-400 shrink-0 text-[var(--text-color-light9)]">{{
											item.attr_value_name }}</text>
									<view
										class="text-[#333] box-border value-wid text-[26rpx] leading-[30rpx] font-400 truncate pl-[20rpx]">
										{{ Array.isArray(item.attr_child_value_name) ? item.attr_child_value_name.join(',') :
											item.attr_child_value_name }}
									</view>
									<!-- <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text> -->
								</view>
							</block>
							<view v-if="goodsDetail.goods.attr_format.length > 4" class="flex-center"
								@click="isAttrFormatShow = !isAttrFormatShow">
								<text class="text-[24rpx] mr-[10rpx]">{{ !isAttrFormatShow ? '展开' : '收起' }}</text>
								<text class="nc-iconfont !text-[22rpx]"
									:class="{ 'nc-icon-xiaV6xx': !isAttrFormatShow, 'nc-icon-shangV6xx-1': isAttrFormatShow }"></text>
							</view>
						</view>
					</view>

					<view class="my-[var(--top-m)] sidebar-margin card-template px-[var(--pad-sidebar-m)]">
						<view class="title">商品详情</view>
						<view class="u-content">
							<u-parse :content="goodsDetail.goods.description"
								:tagStyle="{ img: 'vertical-align: top;', p: 'overflow: hidden;word-break:break-word;' }"></u-parse>
						</view>
					</view>

					<!-- <ns-goods-recommend></ns-goods-recommend> -->

					<view class="tab-bar-placeholder"></view>
					<view
						class="border-[0] border-t-[2rpx] border-solid border-[#f5f5f5] w-[100%] flex justify-between pl-[32rpx] pr-[4rpx] bg-[#fff] box-border fixed left-0 bottom-0 tab-bar z-1 items-center">
						<view class="flex items-center">
							<view class="flex flex-col justify-center items-center mr-[38rpx]"
								@click="redirect({ url: '/addon/shop/pages/index', mode: 'reLaunch' })">
								<view class="nc-iconfont nc-icon-shouyeV6xx11 text-[40rpx]"></view>
								<text class="text-[20rpx] mt-[10rpx]">首页</text>
							</view>
							<!-- #ifdef H5 -->
							<view class="flex flex-col justify-center items-center mr-[38rpx]"
								@click="redirect({ url: '/addon/shop/pages/goods/cart' })">
								<view class="relative w-[40rpx] h-[40rpx]">
									<view class="iconfont icongouwuche2 text-[40rpx]"></view>
									<view v-if="cartTotalNum"
										:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', cartTotalNum > 9 ? 'px-[10rpx]' : '']">
										{{ cartTotalNum > 99 ? "99+" : cartTotalNum }}
									</view>
								</view>
								<text class="text-[20rpx] mt-[10rpx]">购物车</text>
							</view>
							<!-- #endif -->
							<!-- <view class="flex flex-col justify-center items-center mr-[38rpx]" @click="collectFn">
								<text class="nc-iconfont text-[40rpx]"
									:class="{ 'text-[#ff0000] nc-icon-xihuanV6mm': isCollect, 'text-[#303133] nc-icon-guanzhuV6xx': !isCollect }"></text>
								<text class="text-[20rpx] mt-[10rpx]">收藏</text>
							</view> -->

							<!-- #ifdef MP-WEIXIN -->
							<view class="flex flex-col justify-center items-center mr-[38rpx]"
								@click="redirect({ url: '/addon/shop/pages/goods/cart' })">
								<view class="relative w-[40rpx] h-[40rpx]">
									<view class="iconfont icongouwuche2 text-[40rpx]"></view>
									<view v-if="cartTotalNum"
										:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', cartTotalNum > 9 ? 'px-[10rpx]' : '']">
										{{ cartTotalNum > 99 ? "99+" : cartTotalNum }}
									</view>
								</view>
								<text class="text-[20rpx] mt-[10rpx]">购物车</text>
							</view>
							<view>
								<nc-contact :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath"
									:send-message-img="sendMessageImg">
									<view class="flex flex-col justify-center items-center mr-[38rpx]">
										<text class="nc-iconfont nc-icon-kefuV6xx-1 text-[40rpx]"></text>
										<text class="text-[20rpx] mt-[10rpx]">客服</text>
									</view>
								</nc-contact>
							</view>
							<!-- #endif -->
						</view>
						<view class="flex flex-1" v-if="goodsDetail.goods.status == 1">
							<button
								v-if="goodsDetail.goods.spuType == 6 && (goodsDetail.tvSaleMethodType == 0 || goodsDetail.goods.vodeoPlay)"
								style="background: linear-gradient(127deg, #FFB000 0%, #FFA029 100%);" @click="videosDataShow = true"
								class="!w-[420rpx] flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">立即观看</button>
							<button v-else-if="goodsDetail.goods.is_gift"
								class="!w-[420rpx] flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">商品为赠品不可购买</button>
							<block v-else-if="maxBuy > 0 || maxBuy == -1">
								<button v-if="goodsDetail.goods.spuType"
									class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
									style="background: linear-gradient(127deg, #FFB000 0%, #FFA029 100%);" @click="buyFn('join_cart')">
									加入购物车</button>
								<button v-if="isShowSingleSku"
									:style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
									class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] primary-btn-bg !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
									@click="buyFn('buy_now')">立即购买</button>
								<button v-else :style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
									class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border">已售罄</button>
							</block>
							<button v-else-if="maxBuy == 0" :style="{ width: '420rpx' + '!important' }"
								class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">已达限购数量</button>
						</view>
						<view class="flex flex-1" v-else>
							<button
								class="w-[100%] !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">该商品已下架</button>
						</view>
					</view>
				</view>
				<!-- 章节 -->
				<view @touchmove.prevent.stop>
					<u-popup class="popup-type" :show="videosDataShow" @close="videosDataShow = false">
						<view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
							<view class="title">章节目录</view>
							<scroll-view class="h-[520rpx]" scroll-y="true">
								<view class="pl-[22rpx] pb-[28rpx] pr-[37rpx]">
									<view class="flex  justify-between mb-[28rpx]" v-for="(item, index) in goodsDetail.goods.videos"
										:key="index"
										@click="palyVideo(item, item.status && goodsDetail.tvSaleMethodType == 1 && !goodsDetail.goods.vodeoPlay)">

										<view class="flex flex-1">
											<image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]"
												:src="'https://files.meton.vip/6e19a4c79ad0d2a4493c4426bcd0a5a49e6adc36358412f170d5eed6cbedbd83.png'"
												mode="aspectFit" />
											<view class="text-[30rpx] leading-[36rpx] text-[#333] mb-[8rpx]">{{ item.title }}</view>
										</view>
										<view>
											<!-- 锁定 -->
											<image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]"
												v-if="item.status && goodsDetail.tvSaleMethodType == 1 && !goodsDetail.goods.vodeoPlay"
												:src="'https://files.meton.vip/2b2361467a3d5ef90aac27854284ee7c950d692939651e25fef743fa74016b77.png'"
												mode="aspectFit" />
											<!-- 解锁 -->
											<image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]" v-else
												:src="'https://files.meton.vip/41b00108edefa1463673ac190f36d2f96f203404d37429c413778f5da71251b1.png'"
												mode="aspectFit" />
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</u-popup>
				</view>
				<!-- 服务 -->
				<view @touchmove.prevent.stop>
					<u-popup class="popup-type" :show="servicesDataShow" @close="servicesDataShow = false">
						<view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
							<view class="title">商品服务</view>
							<scroll-view class="h-[520rpx]" scroll-y="true">
								<view class="pl-[22rpx] pb-[28rpx] pr-[37rpx]">
									<view class="flex mb-[28rpx]" v-for="(item, index) in goodsDetail.service">
										<image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]"
											:src="img(item.image || 'addon/shop/icon_service.png')" mode="aspectFit" />
										<view class="flex-1">
											<view class="text-[30rpx] leading-[36rpx] text-[#333] mb-[8rpx]">{{ item.service_name }}</view>
											<view class="text-[24rpx] leading-[36rpx] text-[var(--text-color-light9)]">{{ item.desc }}</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</u-popup>
				</view>
				<!-- 配送 -->
				<view @touchmove.prevent.stop>
					<u-popup class="popup-type" :show="distributionDataShow" @close="distributionDataShow = false">
						<view class="min-h-[360rpx] popup-common" @touchmove.prevent.stop>
							<view class="title">配送方式</view>
							<scroll-view class="h-[520rpx]" scroll-y="true">
								<view class="px-[var(--popup-sidebar-m)]">
									<view class="flex mb-[40rpx]" v-for="(item, index) in goodsDetail.delivery_type_list"
										@click="distributionListFn(item, index)">
										<image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]" :src="img('addon/shop/icon_service.png')"
											mode="aspectFit" />
										<view class="flex-1">
											<view class="text-[30rpx] leading-[36rpx] text-[#333] mb-[8rpx]">{{ item.name }}</view>
											<view class="text-[24rpx] leading-[36rpx] text-[var(--text-color-light9)]">{{ item.desc }}</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</u-popup>
				</view>
				<!-- 优惠券 -->
				<view @touchmove.prevent.stop>
					<u-popup class="popup-type" :show="couponListShow" @close="couponListShow = false">
						<view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
							<view class="title">优惠券</view>
							<scroll-view class="h-[520rpx]" scroll-y="true">
								<view class="px-[32rpx]">
									<view
										class="mb-[30rpx] flex items-center border-[2rpx] border-solid border-[rgba(0,0,0,.1)] rounded-[var(--rounded-small)]"
										v-for="(item, index) in couponList" :key="index">
										<view
											class="flex flex-col items-center my-[20rpx] w-[200rpx] border-0 border-r-[2rpx] border-dashed border-[rgba(0,0,0,.1)]">
											<view class="text-xs price-font" v-if="item.discountType == 1">
												<text class="text-[28rpx]">￥</text>
												<text class="text-[48rpx]">{{ fen2yuan(item.discountPrice) }}</text>
											</view>
											<view class="text-xs price-font" v-else>
												<text class="text-[48rpx]">{{ item.discountPercent / 10.0 }}</text>
												<text class="text-[28rpx]">折</text>

											</view>
											<text class="text-xs mt-[12rpx]">{{ Number(item.usePrice) ? ('满' +
												fen2yuan(item.usePrice) + '元可用') : '无门槛' }}</text>
										</view>
										<view class="ml-[20rpx] flex-1 flex flex-col py-[20rpx]">
											<text class="text-xs font-500">{{ item.couponTemplateName }}</text>
											<text class="text-xs text-[var(--text-color-light6)] mt-[12rpx]" v-if="item.validityType == 2">
												{{ ('领取之日起' + item.fixedEndTerm + '天内有效') }} </text>
											<text class="text-xs text-[var(--text-color-light6)] mt-[12rpx]" v-else>
												(有效期:{{ timeFormat(item.validStartTime, 'yyyy-mm-dd') }} 至 {{
													timeFormat(item.validEndTime, 'yyyy-mm-dd') }})
											</text>
										</view>
										<text v-if="item.btnType === 'collecting'"
											class="bg-[var(--primary-color)] mr-[20rpx] w-[106rpx] box-border text-center text-[#fff] h-[50rpx] text-[22rpx] px-[20rpx] leading-[50rpx] rounded-[100rpx]"
											@click="getCouponFn(item, index)">领取</text>
										<text v-else
											class="!bg-[#FFB4B1] mr-[20rpx] text-[#fff] mr-[20rpx] h-[50rpx] text-[22rpx] px-[20rpx] leading-[50rpx] rounded-[100rpx]">{{
												item.btnType === 'collected' ? '已领完' : '已领取' }}</text>
									</view>
								</view>
							</scroll-view>
							<view class="btn-wrap">
								<button class="primary-btn-bg btn" @click="couponListShow = false">确定</button>
							</view>
						</view>
					</u-popup>
				</view>
				<ns-goods-sku v-if="loading" ref="goodsSkuRef" :goods-detail="goodsDetail"
					@change="specSelectFn"></ns-goods-sku>
				<ns-goods-manjian ref="manjianShowRef"></ns-goods-manjian>
				<share-poster ref="sharePosterRef" posterType="shop_goods" :posterId="'4'" :posterParam="posterParam"
					:copyUrlParam="copyUrlParam" />
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<!-- 小程序隐私协议 -->
			<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
			<!-- #endif -->
		</view>
	</x-skeleton>
	<x-skeleton :type="'text'" :loading="loading" :config="skeleton.config">
	</x-skeleton>


</template>

<script setup lang="ts">
import { ref, computed, getCurrentInstance, nextTick, reactive } from 'vue';
import { onLoad, onShow, onUnload, onPageScroll } from '@dcloudio/uni-app'
import { img, redirect, handleOnloadParams, getToken, deepClone, goback } from '@/utils/common';
import { getGoodsDetail, browse, collect, cancelCollect, getEvaluateList, getManjian, getActivityListBySpuId, getSettlementProduct } from '@/addon/shop/api/goods';
import { getShopCouponList, getCoupon, getCouponTemplateList } from '@/addon/shop/api/coupon';
import nsGoodsSku from '@/addon/shop/components/ns-goods-sku/ns-goods-sku.vue';
import nsGoodsManjian from '@/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue';
import useCartStore from '@/addon/shop/stores/cart'
import { useLogin } from '@/hooks/useLogin'
import useMemberStore from '@/stores/member'
import { useShare } from '@/hooks/useShare'
import sharePoster from '@/components/share-poster/share-poster.vue'
import nsGoodsRecommend from '@/addon/shop/components/ns-goods-recommend/ns-goods-recommend.vue';
import { useGoods } from '@/addon/shop/hooks/useGoods'
import { fen2yuan } from '@/utils/formatting';

const diyGoods = useGoods();
// 使用 reactive 创建响应式对象
const timeData = ref({});
// 定义 onChange 方法
const onChange = (e) => {
	timeData.value = e;
};
const skeleton = reactive({
	type: 'list',
	loading: true,
	config: {
		gridRows: 5
	}
})
// 分享
const { setShare } = useShare()

// 会员信息
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)

// 购物车数量
const cartStore = useCartStore();
const cartTotalNum = computed(() => cartStore.totalNum)

const goodsSkuRef: any = ref(null);
const goodsDetail: any = ref({});
const switchMedia: any = ref('img');
const manjianShowRef: any = ref(null); //满减送

const isAttrFormatShow = ref(false); //控制属性是否展开

const loading = ref<boolean>(false);
const servicesDataShow = ref<boolean>(false)
const distributionDataShow = ref<boolean>(false) //配送
const couponListShow = ref<boolean>(false) //优惠券
const discountTime = ref(0)
//视频章节
const videosDataShow = ref<boolean>(false)
const palyVideo = (item: any, lock: any) => {
	if (lock) {
		uni.showToast({ title: `请先购买视频后,再进行观看`, icon: 'none' })
	} else {
		switchMedia.value = 'video'
		videoContext.value = uni.createVideoContext('goodsVideo');

		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
		videosDataShow.value = false
		goodsDetail.value.goods.videoImg = item.picUrl
		goodsDetail.value.goods.videoUrl = item.videoUrl
		setTimeout(() => {
			videoContext.value.play()
		}, 500)

	}

}
const sendMessageTitle = ref('')
const sendMessagePath = ref('')
const sendMessageImg = ref('')

const wxPrivacyPopupRef: any = ref(null)
const videoContext: any = ref(null)
let pageParameter = {};
onLoad((option: any) => {
	// #ifdef MP-WEIXIN
	// 处理小程序场景值参数
	option = handleOnloadParams(option);
	// #endif
	pageParameter = option;

})

onShow(() => {
	loading.value = false;
	// 删除配送方式
	uni.removeStorageSync('distributionType');
	cartStore.getList();
	// getManjianInfo();
	getActivityListBySpuIdFn()
	getDetailInfo();
})

const onActivity = (activity: any) => {

	const type = activity.type;
	if (type == 3) {
		// 如果是拼团

		if (activity.atype == 1) {
			// 超级拼团
			redirect({ url: `/addon/shop/pages/superGroupon/groupon`, param: { aid: activity.id } })
		} else if (activity.atype == 0) {
			// 普通拼团
			redirect({ url: `/addon/shop/pages/goods/groupon`, param: { activity_id: activity.id }, mode: 'navigateTo' })
		}

	} else if (type == 1) {
		// 秒杀
		const typePath = 'seckill'
		redirect({ url: `/addon/shop/pages/goods/${typePath}`, param: { activity_id: activity.id }, mode: 'navigateTo' })
	}

}
const getDetailInfo = () => {
	getGoodsDetail({
		// goods_id: pageParameter.goods_id || '',
		spuId: pageParameter.goods_id || '',
		// sku_id: pageParameter.sku_id || '',
		// type: pageParameter.type || ''  // 来源营销活动类型，例如：discount：限时折扣，newcomer_discount：新人价
	}).then(async (res: any) => {
		if (!res.data || JSON.stringify(res.data) === '{}') {
			let goBackParameter = {
				url: '/addon/shop/pages/index',
				title: '找不到该商品',
				mode: 'reLaunch'
			};
			goback(goBackParameter)
			return false
		}
		let data: any = deepClone(res.data);
		/**
		 * 获取商品的营销信息 
		 * 补充 SKU 的价格信息
		 */
		try {
			if (getToken()) {
				const { data: settlementData } = getSettlementProduct({ spuIds: pageParameter.goods_id })

				// 补充 SKU 的价格信息
				data.skus.forEach((sku) => {


					settlementData[0].skus.forEach((item) => {

						if (sku.skuId === item.skuId) {
							if (sku.promotionType == 6) {
								// 会员价
								sku.member_discount = true
								sku.member_price = item.promotionPrice
							}
						}
					});
				});

			}

			// appendSettlementProduct(data.list, settlementInfos)
		} catch (error) { }

		/** 将数据接口拼成 所需要的接口 尽量减少前端代码的改动  */
		goodsDetail.value.goods = data; //商品信息
		goodsDetail.value.goods_id = data.spuId,
			goodsDetail.value.member_discount = false,
			goodsDetail.value.member_price = undefined,

			goodsDetail.value.evaluate_is_show = true //展示评价
		goodsDetail.value.skuList = data.skus.map((sku: any) => {
			return {
				cost_price: sku.costPrice, //成本价
				market_price: sku.marketPrice, //划线价
				member_discount: sku.member_discount,
				member_price: sku.member_price,//会员价
				price: sku.price, //零售价
				sku_id: sku.skuId,
				sku_image: sku.picUrl,
				stock: sku.stock,
				tvSaleMethodType: sku.tvSaleMethodType,//视频商品是否付费
				sku_spec_format: sku.properties.map((value: any) => {
					return value.valueName
				}).toString(),
			}
		})
		goodsDetail.value.goodsSpec = diyGoods.getPropertyList(data.skus).map((spec) => {
			return {
				spec_id: spec.id,
				spec_name: spec.name,
				spec_values: spec.values.map((specValue: any) => {
					return specValue.name
				}).toString()
			}
		})
		/** 视频商品逻辑 */
		if (data.spuType == 6) {
			goodsDetail.value.tvSaleMethodType = 1 //默认先都给付费
		}
		/** 原代码的接口逻辑中有默认选中的商品 故暂取第一个sku的数据为默认选中商品 */
		Object.assign(goodsDetail.value, goodsDetail.value.skuList[0])


		isCollect.value = goodsDetail.value.goods.favorite;
		goodsDetail.value.delivery_type_list = goodsDetail.value.goods.delivery_type_list ? Object.values(goodsDetail.value.goods.delivery_type_list) : [];


		loading.value = true;


		goodsDetail.value.goods.attr_format = []
		if (data.goods && data.goods.attr_format) {
			let attrFormatArr: any = deepClone(JSON.parse(data.goods.attr_format));
			attrFormatArr.forEach((item: any, index: any) => {
				if ((item.attr_child_value_name && !(item.attr_child_value_name instanceof Array)) || ((item.attr_child_value_name instanceof Array) && item.attr_child_value_name.length)) {
					goodsDetail.value.goods.attr_format.push(item);
				}
			})
		}
		if (goodsDetail.value.goods.videoUrl && goodsDetail.value.goods.videoUrl != '') {
			videoContext.value = uni.createVideoContext('goodsVideo');
			switchMedia.value = 'video'
		}

		sendMessageTitle.value = goodsDetail.value.goods.titleName || goodsDetail.value.goods.spuName
		// sendMessagePath.value = '/addon/shop/pages/goods/detail?sku_id=' + goodsDetail.value.sku_id;
		sendMessagePath.value = '/addon/shop/pages/goods/detail?goods_id=' + goodsDetail.value.goods_id;
		if (goodsDetail.value.type) {
			sendMessagePath.value += '&type=' + goodsDetail.value.type;
		}
		sendMessageImg.value = img(goodsDetail.value.goods.picUrl)

		// 分享 - start
		let share = {
			title: goodsDetail.value.goods.titleName,
			desc: goodsDetail.value.goods.subTitleName,
			url: goodsDetail.value.goods.picUrl
		}
		uni.setNavigationBarTitle({
			title: goodsDetail.value.goods.titleName || ''
		})
		setShare({
			wechat: {
				...share
			},
			weapp: {
				...share
			}
		});
		// 分享 - end

		// 折扣信息
		if (Object.keys(goodsDetail.value.goods).length && goodsDetail.value.type == 'discount' && goodsDetail.value.goods.is_discount && Object.keys(goodsDetail.value.discount_info).length) {
			let now = new Date();
			let timestamp: any = now.getTime();
			discountTime.value = goodsDetail.value.discount_info.active.end_time * 1000 - timestamp.toFixed(0)
		}
		// 商品限购
		goodsMaxBuy(goodsDetail.value);

		// 获取优惠券列表
		getShopCouponListFn();

		// 获取评价
		getEvaluateListFn();

		if (getToken()) {
			// 我的足迹
			// myBrowseFn(goodsDetail.value.goods.goods_id);
		}

		copyUrlFn();

		nextTick(() => {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(instance);
				query.select('.swiper-box').boundingClientRect((data: any) => {
					swiperHeight = data ? data.height : 0;
				}).exec();
				query.select('.detail-head').boundingClientRect((data: any) => {
					if (data) {
						detailHead = data.height ? data.height : 0;
					}
				}).exec();
			}, 400)
			// #ifdef MP
			if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
			// #endif
		})
	}).catch((err: any) => {
		let goBackParameter = {
			url: '/addon/shop/pages/index',
			title: err.msg,
			mode: 'reLaunch'
		};
		goback(goBackParameter)
		return false
	})
}

// 我的足迹
const myBrowseFn = (goods_id: any) => {
	browse({
		goods_id
	}).then((res: any) => { })
}

// 获取满减信息
let manjianData = ref({})
const getManjianInfo = () => {
	getManjian({
		goods_id: pageParameter.goods_id || '',
		sku_id: pageParameter.sku_id || ''
	}).then((res: any) => {
		if (Object.keys(res.data).length) {
			manjianData.value.condition_type = res.data.condition_type;
			manjianData.value.rule_json = res.data.rule_json;
			manjianData.value.name = res.data.manjian_name;
		}
	})
}
// 获取 营销活动信息
const activityList = ref()
const getActivityListBySpuIdFn = async () => {
	let params = {
		spuId: pageParameter.goods_id
	}
	const { data } = await getActivityListBySpuId(params)
	activityList.value = data
}

// 商品限购
const maxBuy = ref(-1);
const goodsMaxBuy = (data: any = {}) => {
	// 限购 - 是否开启限购
	if (data.goods.is_limit && userInfo.value && data.goods.stock > 0) {
		if (data.goods.max_buy) {
			let max_buy = 0;
			if (data.goods.limit_type == 1) { //单次限购
				max_buy = data.goods.max_buy;
			} else { // 单人限购
				let buyVal = data.goods.max_buy - (data.goods.has_buy || 0);
				max_buy = buyVal > 0 ? buyVal : 0;
			}

			if (max_buy > data.goods.stock) {
				maxBuy.value = data.goods.stock
			} else if (max_buy <= data.goods.stock) {
				maxBuy.value = max_buy;
			}
		}
	}
}


const specSelectFn = (id: any) => {
	goodsDetail.value.skuList.forEach((item: any, index: any) => {
		if (item.sku_id == id) {
			Object.assign(goodsDetail.value, item);
		}
	})
}

// 判断单规格库存是否为0
const isShowSingleSku = computed(() => {
	let isSingleSpec = false // 是否为单规格，true：多规格，false：单规格
	goodsDetail.value.skuList.forEach((item: any, index: any) => {
		if (item.sku_spec_format) {
			isSingleSpec = true
		}
	})

	// 单规格，库存为0，显示已售罄
	if (!isSingleSpec && goodsDetail.value.stock <= 0) {
		return false;
	} else if (!isSingleSpec && goodsDetail.value.stock > 0) {
		// 单规格，库存大于0，可以购买
		return true;
	}
	return true;
})

// 判断商品属性模块是否展示
const isGoodsPropertyTemp = computed(() => {
	let bool = false;
	if (goodsDetail.value.service && goodsDetail.value.service.length ||
		goodsDetail.value.goodsSpec && goodsDetail.value.goodsSpec.length ||
		goodsDetail.value.goods.goods_type == 'real' && goodsDetail.value.delivery_type_list && goodsDetail.value.delivery_type_list.length || couponList.value.length) {
		bool = true;
	}
	return bool;
})

const manjianOpenFn = () => {
	manjianShowRef.value.open(manjianData.value);
}

const buyFn = (type: any) => {
	if (goodsSkuRef.value) {
		goodsSkuRef.value.open(type)
	}
}

// 收藏
const isCollect: any = ref(0);
const collectFn = () => {
	// 检测是否登录
	if (!userInfo.value) {
		uni.showToast({
			title: '未登录，请先登录后再收藏商品',
			icon: 'none'
		});
		return false
	}
	let api = isCollect.value ? cancelCollect({ goods_ids: [goodsDetail.value.goods_id] }) : collect(goodsDetail.value.goods_id);
	api.then(res => {
		isCollect.value = !isCollect.value;
		if (isCollect.value) {
			uni.showToast({
				title: '收藏成功',
				icon: 'none'
			});
		} else {
			uni.showToast({
				title: '取消收藏',
				icon: 'none'
			});
		}
	})
}

// 优惠券
const couponList = ref([]);
const getShopCouponListFn = () => {
	getCouponTemplateList({
		productScope: 2,
		count: 10,
		spuId: goodsDetail.value.goods_id || ''
	}).then((res: any) => {
		couponList.value = res.data.map((el: any) => {
			if (!el.canTake) {
				el.btnType = 'collected'//已领完
			} else if (!userInfo.value) {
				el.btnType = 'collecting'//领用
			}
			// if (el.sum_count != -1 && el.receive_count === el.sum_count) {
			// 	el.btnType = 'collected'//已领完
			// }
			// if (!userInfo.value) {
			// 	el.btnType = 'collecting'//领用
			// } else {
			// 	if (el.is_receive && el.limit_count === el.member_receive_count) {
			// 		el.btnType = 'using'//去使用
			// 	} else {
			// 		el.btnType = 'collecting'//领用
			// 	}
			// }
			return el
		});
	})
}

// 领取优惠券
const getCouponFn = (data: any, index: any) => {
	// 检测是否登录
	if (!userInfo.value) {
		useLogin().setLoginBack({
			url: '/addon/shop/pages/goods/detail',
			param: { goods_id: goodsDetail.value.goods_id, type: goodsDetail.value.type }
		})
		return false
	}
	getCoupon({
		templateId: data.couponTemplateId || '',
		number: 1,
	}).then(res => {
		// couponList.value[index].btnType = 'using'
		getShopCouponListFn();
	})
}

// 获取评价
const evaluate = ref({
	count: 0
})

const getEvaluateListFn = () => {
	getEvaluateList(goodsDetail.value.goods_id, 1, 3, 0).then((res: any) => {
		evaluate.value.list = res.data.list
		evaluate.value.count = res.data.total

	})
}

//进入评论
const toLink = () => {
	redirect({ url: '/addon/shop/pages/evaluate/list', param: { goods_id: goodsDetail.value.goods_id } })
}

//预览图片
const imgListPreview = (item: any, index: any) => {
	if (Array.isArray(item)) {
		if (!item.length) return false
		var urlList = item;
		uni.previewImage({
			indicator: "number",
			current: index,
			loop: true,
			urls: urlList
		})
	} else {
		if (item === '') return false
		var urlList = []
		urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
		uni.previewImage({
			indicator: "number",
			loop: true,
			urls: urlList
		})
	}

}

// 返回上一页
const backToPrevious = () => {
	if (getCurrentPages().length > 1) {
		uni.navigateBack({
			delta: 1
		});
	} else {
		redirect({
			url: '/addon/shop/pages/index',
			mode: 'reLaunch'
		});
	}
}

/************ 选择配送方式-start ****************/
const selectDeliveryType = ref(0);
const distributionDataOpen = (() => {
	distributionDataShow.value = true;
});
const distributionListFn = ((data: any, index: any) => {
	selectDeliveryType.value = index;
	distributionDataShow.value = false;
	uni.setStorageSync('distributionType', data.name);
});
/************ 选择配送方式-end ****************/


/************ 自定义头部-start ****************/
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let platform = systemInfo.platform;
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

// 导航栏内部盒子的样式
const navbarInnerStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	let rightButtonWidth = menuButtonInfo.width ? menuButtonInfo.width * 2 + 'rpx' : '70rpx';
	style += 'height:' + menuButtonInfo.height + 'px;';
	style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'padding-top:' + menuButtonInfo.top + 'px;';
	style += 'padding-bottom: 8px;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif

	// #ifdef H5
	style += 'height: 100rpx;';
	style += 'padding-right: 30rpx;';
	style += 'padding-left: 30rpx;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif
	return style;
})

// 导航栏内部盒子的样式
const navbarInnerArrowStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	style += "padding-left: 10rpx;"
	style += "padding-right: 10rpx;"
	style += 'position: absolute;';
	style += 'left:calc( 100vw - ' + menuButtonInfo.right + 'px);';
	style += 'font-size: 26px;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 700;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
	}
	// #endif
	// #ifdef H5
	style += 'font-size: 26px;';
	// #endif
	return style;
})

// 头部滚动
const instance = getCurrentInstance();
let swiperHeight = 0
let detailHead = 0

const detailHeadBgChange = ref(false)
onPageScroll((e) => {
	if (swiperHeight == 0 || detailHead == 0) return;
	let height = swiperHeight - detailHead - 20;
	detailHeadBgChange.value = false;
	if (e.scrollTop >= height) {
		detailHeadBgChange.value = true;
	}
})
/************ 自定义头部-end ****************/

const swiperClick = (index: any) => {
	if (typeof index == 'number') imgListPreview(goodsDetail.value.goods.sliderPicUrls, index)
}

/************* 分享海报-start **************/
const sharePosterRef: any = ref(null);
const copyUrlParam = ref('');
let posterParam: any = {};

// 分享海报链接
let wap_member_id = uni.getStorageSync('wap_member_id');

const copyUrlFn = () => {

	// copyUrlParam.value = '?sku_id=' + goodsDetail.value.sku_id;
	copyUrlParam.value = '?goods_id=' + goodsDetail.value.goods_id;
	if (wap_member_id) copyUrlParam.value += '&mid=' + wap_member_id;

	if (goodsDetail.value.type) {
		copyUrlParam.value += '&type=' + goodsDetail.value.type;
	}
}

const openShareFn = () => {
	// posterParam.sku_id = goodsDetail.value.sku_id;
	posterParam.goods_id = goodsDetail.value.goods_id;

	if (wap_member_id) posterParam.member_id = wap_member_id;
	sharePosterRef.value.openShare()
}
/************* 分享海报-end **************/

// 价格类型
const priceType = ref('') //''=>原价，新人价=>newcomer_price，discount_price=>折扣价，member_price=>会员价

// 商品价格
const goodsPrice = computed(() => {
	let price = 0;
	if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'newcomer_discount' && goodsDetail.value.is_newcomer && goodsDetail.value.newcomer_price != goodsDetail.value.price) {
		// 新人价
		price = goodsDetail.value.newcomer_price;
		priceType.value = 'newcomer_price'
	} else if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'discount' && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.is_discount && goodsDetail.value.sale_price != goodsDetail.value.price) {
		// 折扣价
		price = goodsDetail.value.sale_price ? goodsDetail.value.sale_price : goodsDetail.value.price;
		priceType.value = 'discount_price'
	} else if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.member_discount && getToken() && goodsDetail.value.member_price) {
		// 会员价
		price = goodsDetail.value.member_price ? goodsDetail.value.member_price : goodsDetail.value.price;
		priceType.value = 'member_price'
	} else {
		price = goodsDetail.value.price
		priceType.value = ''
	}
	return diyGoods.fen2yuan(price);
})

// 关闭预览图片
onUnload(() => {
	// #ifdef  H5 || APP
	uni.closePreviewImage()
	// #endif
})
</script>
<style lang="scss" scoped>
@import '@/addon/shop/styles/common.scss';

:deep(.uni-video-bar) {
	bottom: 34rpx !important;
}

:deep(.uni-video-cover) {
	background: none;
}

:deep(.uni-video-cover-duration) {
	display: none;
}

:deep(.uni-video-cover-play-button) {
	border-radius: 50%;
	border: 4rpx solid #fff;
	width: 120rpx;
	height: 120rpx;
	background-size: 30%;
}

.remove-border {
	&::after {
		border: none;
	}
}

:deep(.u-cell-group__wrapper) {
	.u-cell__body {
		padding: 23rpx 32rpx;
	}
}

.tab-bar-placeholder {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

.tab-bar {
	padding-top: 16rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
}

:deep(.u-count-down) .u-count-down__text {
	color: #fff;
	font-size: 28rpx;
}

:deep(.u-swiper-indicator__wrapper--line__bar) {
	height: 5rpx !important;
}

:deep(.u-swiper-indicator__wrapper--line) {
	height: 5rpx !important;
}

.datail-title {
	background: linear-gradient(#fff 70%, #F6F6F6);
}

.goods-sku .value-wid {
	width: calc(100% - 160rpx);
}

.media-mode {
	text {
		background: rgba(100, 100, 100, 0.4);
		color: #fff;
		font-size: 24rpx;
		line-height: 50rpx;
		border-radius: 20rpx;
		padding: 0 30rpx;
		display: inline-block;

		&:last-child {
			margin-left: 40rpx;
		}
	}
}

/*  #ifdef MP  */
.goods-price-time {
	animation: fadein .1s;
}

/* 进入动画 */
@keyframes fadein {
	0% {
		opacity: 0;
	}

	99% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*  #endif  */
</style>
